<template>
  <div class="saledetail">
    <Title></Title>
     <div class="inner">
       <div class="saledetailtit">
           售后详情
       </div>
       <div class="saledetail_box">
          <div class="saledetail_item">
            <span><em>*</em>申请类型：</span><span>{{saledetail.after_sales_type}}</span>
          </div>
          <div class="saledetail_item">
            <span><em>*</em>申请原因：</span><span>{{saledetail.after_sales_reason}}</span>
          </div>
          <div class="saledetail_item">
            <span><em>*</em>申请金额：</span><span>{{saledetail.after_sales_price}}</span>
          </div>
          <div class="saledetail_item">
            <span><em>*</em>联系电话：</span><span>{{saledetail.after_sales_phone}}</span>
          </div>
          <div class="saledetail_item" v-if="saledetail.after_sales_imgs!=null">
            <span>图片信息：</span>
            <div class="saledetail_img">
              <img v-for="(item,index) in saledetail.after_sales_imgs"  :src="[item]" alt="" srcset="">
            </div>
          </div>
          <div class="saledetail_status">
            <div class="saledetail_statustit">
              {{saledetail.status_show}}
            </div>
            <el-timeline>
              <el-timeline-item v-for="(item, index) in saledetail.remark" :key="index" :color="index==0?'red':''" :timestamp="item.time">
                {{item.user}}:
                <span style="color:red;">
                  {{item.type}}
                </span>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div class="saledetail_btn" v-if="saledetail.status===1" @click="saledetailbtnfn">
                确认售后
          </div>

       </div>
     </div>
  </div>
</template>

<script>
  import {saledetailapi,completesaledetailapi} from "../../api/http.js"
  import Title from "../../components/title.vue"
  export default {
    name: 'saledetail',
    components: {
      Title
    },
    data(){
      return{
        saledetail:{}
      }
    },
    methods:{
     async saledetailbtnfn(){
        const res = await completesaledetailapi({id:this.saledetail.id})
        if (res.data.code==200) {
          this.$message(res.data.msg)
           this.$router.push({
             path: "/layout/meorder"
           })
        } else{
           this.$message(res.data.msg)
        }
      }
    },
   async created() {
      const res = await saledetailapi(this.$route.query)
      console.log(res.data.data);
      if (res.data.code==200) {
        this.saledetail=res.data.data
      } else{
        this.saledetail={}
        for (var i = 0; i < Things.length; i++) {
          Things[i]
        }
      }
    }
  }
</script>

<style lang="less">
.inner{
  width: 1300px;
  margin: 0 auto;
  padding:10px 85px;
  box-sizing: border-box;
  .saledetailtit{
    width: 100%;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 20px;
  }
  .saledetail_box{
    width: 100%;
   border: 1px solid #CCCDCE;
   padding: 20px 10px;
   box-sizing: border-box;

   .saledetail_status{
     width: 100%;
     padding-top: 20px;
     padding-left: 20px;
     padding-bottom: 50px;
     .saledetail_statustit{
       width: 100%;
       height: 40px;
       line-height: 40px;
       font-size: 14px;
       margin-bottom: 15px;
       color: red;
     }
   }
   .saledetail_btn{
     width: 136px;
     height: 40px;
     margin: 0 auto;
     background: #FF4444;
     border-radius: 4px;
     font-size: 16px;
     line-height: 40px;
     text-align: center;
     color: #FFFFFF;
     cursor: pointer;
   }
   .saledetail_item{
     font-size: 14px;
     width: 100%;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     margin-bottom: 10px;
     .saledetail_img{
       img{
        width: 80px;
        margin-right: 10px;
        height: 80px;
       }
     }
     span{
       height: 40px;
       line-height: 40px;
       em{
         color: red;
       }
       &:last-child{
         color: #CCCDCE;
         margin-left: 20px;
       }
     }
   }
  }
}
</style>
